import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //使用this.$store.state.name使用定义的属性
  state: {
    cookies:null,
    name:"bbo"
  },
  //vuex中规定只能通过提交mutation的方式去更改store中的状态
  // this.$store.commit('setCookie',data)
  mutations: {
    setCookieWithout(state){
      state.cookies="变变变";
    },
    setCookie(state,payload){
      state.cookies=payload.cookies;
    }
  },
  //上面在mutation的介绍中我们提到了，mutation中规则上是不允许异步操作的，
  //那如果我们需要异步的进行更改状态怎么办？于是vuex为我们提供了action。
  actions: {
    //this.$store.dispatch('changeCookie')
    changeCookie(context){
      let name=context.state.name;
      //context.commit('setCookie',data)
    }
  },
  //一种计算属性  监控变量  
  getters:{
    //不带参数  this.$store.getters.formatterName
    formatterName:state=>{
      let postfix="";
      if(state.name==='bbo'){
        postfix='好';
      }
      return state.name+postfix;
    },
    //带参数
    formatterNameWithParam:(state)=>(val)=>{
      if(state.name==='bbo'){
        postfix=val;
      }
      return state.name+postfix;
    }
  }
})
